<span class="page-title" ><i class="fa fa fa-sitemap"></i> Boards</span>

<section class="content-header">
    <h1>
        <i class="fa fa-sitemap"></i> Boards
        <small> Your have ${ctrl.devices.length} boards</small>
    </h1>

    <ol class="breadcrumb">
        <li>
            <div class="input-group input-group-sm" style="width: 150px;">

                <input ng-model="searchFilter" class="form-control pull-right" placeholder="Search">

                <div class="input-group-btn">
                    <button type="submit" class="btn btn-info"><i class="fa fa-search"></i></button>
                </div>
            </div>
        </li>
        <li><a ng-click="ctrl.newBoard()" class="btn btn-info pull-right" role="button"><i class="fa fa-plus"></i> New Board</a></li>
    </ol>
</section>

<!-- Main content -->
<section class="content" data-ng-init="ctrl.init()">

    <div class="row">

        <div class="col-md-12" ng-if="ctrl.devices.length == 0">

            <div class="box box-widget">
                <div class="box-body">

                    <div class="media">
                        <div class="media-left">
                            <img src="images/boards/preview_board.svg" alt="Preview" class="media-object  hidden-xs" style="width: 450px;height: auto;border-radius: 4px;box-shadow: 0 1px 3px rgba(0,0,0,.15);">
                        </div>
                        <div class="media-body">
                            <div class="clearfix">
                                <h3 style="margin-top: 0">You have no Boards / Devices</h3>
                                <p class="lead text-muted">
                                    A board can hold multiple sensors and actuators. The OpenDevice SDK provides libraries and APIs to facilitate the creation of devices that connect with the
                                    platform using various communication technologies and protocols.
                                </p>

                                <p class="lead text-muted">
                                    The boads using arduino framework (like ESP8266) <a href="https://github.com/OpenDevice/OpenDevice/wiki/Supported-Devices">are compatible</a> with OpenDevice by default, other devices will be supported via plugins or the REST API.
                                </p>

                                <p class="text-center">
                                    <a ng-click="ctrl.newBoard()" class="btn btn-info" role="button"><i class="fa fa-plus"></i> New Board / Device</a>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.box-body -->

                <!-- /.box-footer -->
                <div class="box-footer">

                </div>
                <!-- /.box-footer -->
            </div>
        </div>

        <div class="col-md-4" ng-repeat="device in ctrl.devices | filter:searchFilter">

                <div class="box box-widget widget-user" >

                    <ul class="widget-user-actions">
                        <li class="dropdown">
                            <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog"></i></a>

                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href ng-really-click="ctrl.delete(device, $index)"><i class="fa fa-remove"></i>Delete</a></li>
                            </ul>
                        </li>
                    </ul>

                    <a href="#/boards/${::device.id}">
                        <div class="widget-user-header bg-aqua-active">
                            <h3 class="widget-user-username">${::device.title}</h3>
                            <!--<h5 class="widget-user-desc">{TYPE} #${::device.id}</h5>-->
                        </div>
                        <div class="widget-user-image">
                            <img class="img-circle" src="/images/boards/generic-blue.png" alt="User Avatar">
                        </div>
                    </a>

                    <div class="box-footer">
                        <div class="row">
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <h5 class="description-header">${::device.devices.length}</h5>
                                    <span class="description-text">Devices</span>
                                </div>
                            </div>
                            <div class="col-sm-4 border-right">
                                <div class="description-block">
                                    <!--<h5 class="description-header">{TYPE} #${::device.id}</h5>-->
                                    <span class="description-text">#${::device.id}</span>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="description-block">
                                    <h5 class="description-header">Last Update</h5>
                                    <span class="description-text">---</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>

    </div>


    <!----------------------------------------------------------------->
    <!-- New Board                                                   -->
    <!----------------------------------------------------------------->
    <div id="new-board"  class="modal fade" tabindex="-1" role="dialog" >
        <div class="modal-dialog" role="document">
            <form class="form-horizontal">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" >New Board</h4>
                    </div>
                    <div class="modal-body">
                        <div ng-switch on="ctrl.newBordPage">
                            <div ng-switch-when="initialHelp"><div ng-include="'boards/initialHelp.htmlx'"></div></div>
                            <div ng-switch-when="selectDevice"><div ng-include="'boards/selectDevice.htmlx'"></div></div>
                            <div ng-switch-when="mqtt"><div ng-include="'boards/connection/mqtt.htmlx'"></div></div>
                            <div ng-switch-when="local"><div ng-include="'boards/connection/local.htmlx'"></div></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" ng-if="ctrl.newBordPage == 'initialHelp'" ng-click="ctrl.newBordPage = 'selectDevice'">Next</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script type="text/ng-template" id="boards/initialHelp.htmlx">
        <h4> <mark>1.</mark> Choose a compatible board</h4>
        <p> The boads using arduino framework (like ESP8266) are compatible with OpenDevice <br/> See
            <a href="https://github.com/OpenDevice/OpenDevice/wiki/Supported-Devices" target="_blank">supported devices</a> for additional information, some device types not require libraries.
        </p>

        <h4> <mark>2.</mark> Install the Library</h4>
        Install the OpenDevice library using <a href="http://www.arduino.cc/en/guide/libraries" target="_blank">Arduino Library Manager</a> ou download source code from
        <a href="https://github.com/OpenDevice/opendevice-lib-arduino"  target="_blank">github</a>.

        <h4> <mark>3.</mark> Upload Code</h4>
        <p>You can use code samples provided in Arduino IDE (Examples > OpenDevice) <br/>
            More advanced projects can be found in: <a href="https://github.com/OpenDevice/opendevice-examples" target="_blank">opendevice-examples</a>
        </p>

    </script>


    <script type="text/ng-template" id="boards/selectDevice.htmlx">
        <div class="row animate-show noselect" > <!--ng-show="ctrl.editMode"-->

            <div class="col-lg-6 col-xs-12">
                <div class="dash-add-box small-box bg-aqua" ng-click="ctrl.newBordPage = 'mqtt'">
                    <div class="inner">
                        <h3>MQTT & Generic</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-connectdevelop"></i>
                    </div>
                    <a href="javascript:void(0);" class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-6 col-xs-12">
                <div class="dash-add-box small-box bg-green" ng-click="ctrl.selectBoardConnection('USB')">
                    <div class="inner">
                        <h3>Usb (Desktop)</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-usb"></i>
                    </div>
                    <a href="javascript:void(0);" class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-6 col-xs-12">
                <div class="dash-add-box small-box bg-yellow" ng-click="ctrl.selectBoardConnection('BLUETOOTH')">
                    <div class="inner">
                        <h3>Bluetooth (Desktop)</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-bluetooth"></i>
                    </div>
                    <a href="javascript:void(0);" class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>

            <div class="col-lg-6 col-xs-12">
                <div class="dash-add-box small-box bg-red" ng-click="ctrl.selectBoardConnection('TCP')">
                    <div class="inner">
                        <h3>TCP</h3>
                    </div>
                    <div class="icon">
                        <i class="fa fa-wifi"></i>
                    </div>
                    <a href="javascript:void(0);" class="small-box-footer">Add New <i class="fa fa-arrow-circle-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </script>


    <script type="text/ng-template" id="boards/connection/mqtt.htmlx">

        <p class="lead text-muted">
            MQTT connections are initiated by the client devices (self-registration), requires no server configuration. <br/>
        </p>

        <h4> <mark>4.</mark> Copy API Key (<a href ng-click="ctrl.updateApiKeys()">reload</a>)</h4>

        <blockquote>
            <ul class="apiKeyList" ng-init="ctrl.updateApiKeys()">
            </ul>
        </blockquote>

    </script>

    <script type="text/ng-template" id="boards/connection/local.htmlx">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">Connections</h3>
                <div class="box-tools pull-right">
                    <span data-toggle="tooltip" title="" class="badge bg-light-blue">${ctrl.discoveryList.length}</span>
                    <button type="button" class="btn btn-box-tool" ng-click="ctrl.startDiscovery()" title="Refresh"><i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="box-body">
                <div class="table-responsive">
                    <table class="table no-margin">
                        <thead>
                        <tr>
                            <th>Host / Resource</th>
                            <th>Type</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr ng-repeat="item in ctrl.discoveryList" >
                            <td>${::item.host}</td>
                            <td>${::item.type}</td>
                            <td>
                                <button type="button" class="btn btn-primary btn-sm" ng-click="ctrl.boardConnect(item)">Connect</button>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </script>

</section>
<!-- /.content -->